<template>
	<view>
		<view class="upWrap">
			<nav-bar-sub></nav-bar-sub>
			<u-image width="100%" height="450rpx" :src='courseInfo.imageSrc'></u-image>
			<view class="course-info">
				<view class="flex-row1">
					<view class="course-name">
						{{courseInfo.name}}
					</view>
					<view class="course-speaker">
						主讲：{{courseInfo.teacher}}
					</view>
				</view>
				<view class="flex-row2">
					<view class="flex-spacearound">
						<view class="learning-member">
							<u-icon name="account"></u-icon>
							学习人数：{{courseInfo.memberCount}}
						</view>
						<view class="periods">
							<u-icon name="order"></u-icon>
							章节数：{{courseInfo.course_list.length}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tabswpier">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#0080d1" ref="tabs" :list="tablist" :current="current" @change="change" :is-scroll="false"
				 swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item>
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="swiper-item">
							<view class="course-description" v-html="courseInfo.introduction">

							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="course-list">
								<u-collapse>
									<view class="collapse-item-box">
										<my-u-collapse-item :title="'第'+ (index+1) +'章: ' + item.name" v-for="(item,index) in courseInfo.course_list"
										 :key='index'>
											<view class="collapse-content" v-for="(section,id) in item.list" :key='id' @click="navgateTo(section.id,section.name,id)">
												<view class="collapse-itemwrap">
													<view class="collapse-icon">
														<u-icon name="play-right-fill"></u-icon>
													</view>
													<view class="collapse-item">
														第{{id+1}}节：{{section.name}}
													</view>
												</view>
												<view class="collaps-button">
													开始学习
												</view>
											</view>
										</my-u-collapse-item>
									</view>
								</u-collapse>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="questionPageWrap">
							<scroll-view scroll-y style="height: 100%;width: 100%;" @scroll="scroll">
								<view class="questionPage" v-for="(data,index) in QAlist">
									<view class="left">
										<view class="avatar">
											<img :src="data.imgPath" mode="aspectFill"></img>
										</view>
										<view class="name">
											{{data.stuName}}
										</view>
									</view>
									<view class="right">
										<view class="QAbox">
											<view class="QAcontent">
												<view class="top">
													<view class="QAtitle">
														{{data.title}}
													</view>
													<view class="time">
														{{data.lastModifiedTime}}
													</view>
												</view>
												<view class="main">
													<view class="text">
														<u-parse :html="data.content"></u-parse>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="" @click="loadmoreC()">
									<u-loadmore :status="status" :load-text="loadText" />
								</view>
							</scroll-view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						name: '课程介绍'
					},
					{
						name: '课程目录'
					},
					{
						name: '学生问答',
						count: 0
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				loadText: {
					loadmore: '点击加载更多',
					loading: '加载中',
					nomore: '没有更多了'
				},
				courseInfo: {
					imageSrc: '',
					name: '',
					teacher: '',
					memberCount: '',
					course_list: [],
					introduction: ''
				},
				QAlist: [],
				qaNum: 5,
				qaPage: 1,
				status: 'loadmore'
			}
		},
		methods: {
			navgateTo(id, name, chapterId) {
				chapterId += 1
				this.$u.route('pages/course/courseLearn/courseLearn', {
					id,
					name,
					chapterId
				});
			},
			scroll() {
				console.log(1);
			},
			change(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			loadmoreC() {
				if (this.status = 'loadmore') {
					this.status = 'loading'
					this.qaPage += 1
					this.$api.getStudyQues(this.$store.state.access_token, this.courseInfo.id, this.qaNum, this.qaPage)
						.then(res => {
							console.log(res);
							res.values.records.forEach(item => {
								item.imgPath =
									`${this.$store.state.base_url}/system/loadImg?imgPath=${encodeURI(item.stuImgPath)}&accessToken=${this.$store.state.access_token}`
								this.QAlist.push(item)
							})
							if (res.values.records.length < this.qaNum) {
								this.status = 'nomore'
							} else {
								this.status = 'loadmore'
							}
						})
				}

			}
		},
		onLoad(option) {
			this.$api.getCourseInfo(this.$store.state.access_token, option.id).then(res => {
				this.courseInfo.id = res.values.course.id
				this.courseInfo.name = res.values.course.name
				this.courseInfo.teacher = res.values.user.realName
				this.courseInfo.imageSrc =
					`${this.$store.state.base_url}/system/loadImg?imgPath=${encodeURI(res.values.course.photo)}&accessToken=${this.$store.state.access_token}`
				this.courseInfo.memberCount = res.values.students.length
				this.courseInfo.introduction = res.values.course.introduction
			})

			this.$api.getStudyChapter(this.$store.state.access_token, option.id).then(res => {
				let courseList = []
				res.values.forEach((item, index, arr) => {
					if (item.parentId === "0") courseList.push(arr.splice(index, 1)[0])
				})
				for (let i = 0; i < courseList.length; i++) {
					courseList[i].list = []
					res.values.forEach((item, index, arr) => {
						if (item.parentId === courseList[i].id) courseList[i].list.push(item)
					})
				}
				this.courseInfo.course_list = courseList
			})
			this.$api.getStudyQues(this.$store.state.access_token, option.id, this.qaNum, this.qaPage)
				.then(res => {
					console.log(res);
					res.values.records.forEach(item => {
						item.imgPath =
							`${this.$store.state.base_url}/system/loadImg?imgPath=${encodeURI(item.stuImgPath)}&accessToken=${this.$store.state.access_token}`
					})
					this.QAlist = res.values.records
					if (this.QAlist.length < this.qaNum) {
						this.status = 'nomore'
					}
				})
		},
		onReachBottom() {}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
		width: 100%;
		min-height: 100%;
	}

	.course-description>>>p {
		white-space: pre-wrap;
		font-size: 10rpx !important;
	}

	.upWrap {

		.course-info {
			box-sizing: border-box;
			padding: 0 15rpx;
			background-color: #FFFFFF;

			.flex-row1 {
				padding: 10rpx 15rpx 5rpx 15rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				box-sizing: border-box;
				flex-wrap: wrap;

				.course-name {
					box-sizing: border-box;
					font-size: 50rpx;
					overflow: hidden;
					width: 70%;
				}

				.course-speaker {
					border-left: 5rpx #7F878C solid;
					width: 30%;
					right: 0;
					position: absolute;
					padding-left: 15rpx;
					box-sizing: border-box;
					font-size: 30rpx;
					color: #7F878C;
				}
			}

			.flex-row2 {
				padding: 0rpx 15rpx 10rpx 15rpx;
				margin-top: 15rpx;
				display: flex;
				flex-direction: row;
				box-sizing: border-box;
				width: 100%;
				color: #7F878C;

				.flex-spacearound {
					display: flex;
					justify-content: flex-start;
					width: 75%;
					font-size: 25rpx;

					.learning-member {
						box-sizing: border-box;
					}

					.periods {
						box-sizing: border-box;
						padding-left: 35rpx;
					}
				}
			}

		}
	}


	.course-description {
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.course-list {
		box-sizing: border-box;
		padding: 15rpx 15rpx 15rpx 15rpx;

		.collapse-item-box {
			box-sizing: border-box;
			padding: 15rpx 15rpx 15rpx 15rpx;

			.collapse-content {
				box-sizing: border-box;
				height: 100%;
				padding: 15rpx 0 15rpx 15rpx;
				font-size: 25rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.collapse-itemwrap {
					display: flex;
					justify-content: flex-start;
					width: 500rpx;

					.collapse-icon {
						box-sizing: border-box;
						margin-right: 30rpx;
					}

					.collapse-item {

						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						box-sizing: border-box;
					}
				}

				.collaps-button {
					box-sizing: border-box;
					padding: 5rpx 15rpx;
					color: white;
					background-color: $uni-color-primary;
					border: 1px solid $uni-border-color;
					border-radius: 20rpx;
				}

			}
		}
	}

	.tabswpier {
		box-sizing: border-box;
		margin-top: 15rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 1000rpx;

		.swiper-box {
			box-sizing: border-box;
			padding-top: 15rpx;
			flex: 1;
		}
	}

	.questionPageWrap {
		box-sizing: border-box;
		overflow: hidden;
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		margin: auto;

		.questionPage {
			display: flex;
			flex-direction: row;
			box-sizing: border-box;
			padding: 5rpx;

			.left {
				width: 12%;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					background-color: #f2f2f2;
				}
			}

			.right {
				.QAbox {
					box-sizing: border-box;
					padding: 10rpx 10rpx 10rpx 10rpx;
					box-sizing: border-box;
					margin: 10px;
					box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
					border-radius: 5px;
					width: 550rpx;

					.QAcontent {
						display: flex;
						flex-direction: column;

						.top {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.QAtitle {
								font-weight: bold;
							}

							.time {
								color: #BED3ED;
							}
						}

						.main {
							box-sizing: border-box;
							padding: 10rpx 5rpx 0rpx 5rpx;
							width: 100%;

							.text {
								display: -webkit-box;
								overflow: hidden;
								text-overflow: ellipsis;
								word-wrap: break-word;
								white-space: normal !important;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
						}
					}
				}
			}
		}
	}


	.avatar {
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>
